<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛博成语接龙</title>
    <style>
        /* 赛博朋克基础样式 */
        :root {
            --neon-pink: #ff2a6d;
            --neon-blue: #05d9e8;
            --neon-purple: #d300c5;
            --dark-bg: #0d0221;
            --darker-bg: #070118;
            --text-glow: 0 0 10px currentColor;
        }
        
        @font-face {
            font-family: 'Cyber';
            src: url('https://fonts.cdnfonts.com/css/cyberpunk') format('woff2');
            font-weight: normal;
            font-style: normal;
        }
        
        body {
            font-family: 'Cyber', 'Microsoft YaHei', sans-serif;
            background-color: var(--dark-bg);
            color: var(--neon-blue);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            background-image: 
                linear-gradient(45deg, var(--darker-bg) 25%, transparent 25%),
                linear-gradient(-45deg, var(--darker-bg) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, var(--darker-bg) 75%),
                linear-gradient(-45deg, transparent 75%, var(--darker-bg) 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }
        
        .cyber-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 3px solid var(--neon-pink);
            box-shadow: 
                0 0 10px var(--neon-pink),
                0 0 20px var(--neon-purple),
                inset 0 0 10px var(--neon-pink);
            position: relative;
            overflow: hidden;
        }
        
        .cyber-container::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background: linear-gradient(
                45deg,
                var(--neon-pink),
                var(--neon-blue),
                var(--neon-purple),
                var(--neon-pink)
            );
            background-size: 400%;
            z-index: -1;
            filter: blur(20px);
            opacity: 0.5;
            animation: cyberGlow 10s linear infinite;
        }
        
        @keyframes cyberGlow {
            0% { background-position: 0 0; }
            50% { background-position: 400% 0; }
            100% { background-position: 0 0; }
        }
        
        h1 {
            color: var(--neon-pink);
            text-align: center;
            font-size: 2.5rem;
            text-shadow: 
                0 0 5px var(--neon-pink),
                0 0 10px var(--neon-pink),
                0 0 20px var(--neon-purple);
            margin-bottom: 30px;
            letter-spacing: 2px;
            position: relative;
        }
        
        h1::after {
            content: "";
            display: block;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
            margin-top: 10px;
            box-shadow: 0 0 5px var(--neon-blue);
        }
        
        .cyber-card {
            background-color: rgba(13, 2, 33, 0.7);
            border: 2px solid var(--neon-blue);
            border-radius: 0;
            padding: 20px;
            margin: 20px 0;
            text-align: center;
            font-size: 24px;
            color: var(--neon-blue);
            text-shadow: var(--text-glow);
            box-shadow: 
                inset 0 0 10px var(--neon-blue),
                0 0 10px var(--neon-blue);
            position: relative;
            overflow: hidden;
        }
        
        .cyber-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(5, 217, 232, 0.2),
                transparent
            );
            transition: 0.5s;
        }
        
        .cyber-card:hover::before {
            left: 100%;
        }
        
        .cyber-hint {
            color: var(--neon-purple);
            text-align: center;
            margin-bottom: 20px;
            font-size: 18px;
            text-shadow: var(--text-glow);
        }
        
        .cyber-input {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            background-color: rgba(13, 2, 33, 0.8);
            border: 2px solid var(--neon-purple);
            color: var(--neon-blue);
            margin-bottom: 15px;
            font-family: 'Cyber', sans-serif;
            text-shadow: var(--text-glow);
            box-shadow: 
                inset 0 0 5px var(--neon-purple),
                0 0 5px var(--neon-purple);
        }
        
        .cyber-input:focus {
            outline: none;
            border-color: var(--neon-pink);
            box-shadow: 
                inset 0 0 10px var(--neon-pink),
                0 0 10px var(--neon-pink);
        }
        
        .cyber-button {
            width: 100%;
            padding: 12px;
            background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple));
            color: white;
            border: none;
            font-size: 18px;
            font-family: 'Cyber', sans-serif;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 2px;
            position: relative;
            overflow: hidden;
            transition: 0.5s;
            margin-bottom: 15px;
            text-shadow: 0 0 5px black;
        }
        
        .cyber-button:hover {
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-pink));
            box-shadow: 
                0 0 10px var(--neon-pink),
                0 0 20px var(--neon-purple);
        }
        
        .cyber-button::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: 0.5s;
        }
        
        .cyber-button:hover::before {
            left: 100%;
        }
        
        .cyber-result {
            margin-top: 20px;
            padding: 15px;
            text-align: center;
            font-size: 18px;
            border: 1px solid;
            text-shadow: var(--text-glow);
        }
        
        .cyber-success {
            border-color: var(--neon-blue);
            color: var(--neon-blue);
            box-shadow: 
                inset 0 0 10px var(--neon-blue),
                0 0 10px var(--neon-blue);
        }
        
        .cyber-error {
            border-color: var(--neon-pink);
            color: var(--neon-pink);
            box-shadow: 
                inset 0 0 10px var(--neon-pink),
                0 0 10px var(--neon-pink);
        }
        
        .cyber-score {
            text-align: center;
            font-size: 20px;
            margin: 20px 0;
            color: var(--neon-purple);
            text-shadow: var(--text-glow);
        }
        
        /* 语音控制区域 */
        .voice-control {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .voice-btn {
            flex: 1;
            margin: 0 5px;
            padding: 8px;
            background: rgba(5, 217, 232, 0.2);
            border: 1px solid var(--neon-blue);
            color: var(--neon-blue);
            cursor: pointer;
            text-align: center;
            transition: all 0.3s;
        }
        
        .voice-btn:hover {
            background: rgba(5, 217, 232, 0.4);
            box-shadow: 0 0 5px var(--neon-blue);
        }
        
        .voice-btn.active {
            background: var(--neon-blue);
            color: var(--dark-bg);
            font-weight: bold;
        }
        
        /* 扫描线效果 */
        body::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                rgba(18, 16, 16, 0) 50%, 
                rgba(0, 0, 0, 0.25) 50%
            );
            background-size: 100% 4px;
            z-index: 100;
            pointer-events: none;
        }
        
        /* 语音状态指示器 */
        .voice-status {
            text-align: center;
            margin: 10px 0;
            min-height: 20px;
        }
        
        .voice-active {
            color: var(--neon-pink);
            text-shadow: 0 0 5px var(--neon-pink);
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
    </style>
</head>
<body>
    <div class="cyber-container">
        <h1>赛博成语接龙</h1>
        
        <div class="cyber-score">
            分数: <span id="score">0</span> | 等级: <span id="level">初级黑客</span>
        </div>
        
        <div class="cyber-card" id="currentIdiom">
            一心一意
        </div>
        
        <div class="cyber-hint" id="hint">
            [系统提示] 请接一个以"<span style="color:var(--neon-pink)">意</span>"开头的成语
        </div>
        
        <!-- 语音控制区域 -->
        <div class="voice-control">
            <div class="voice-btn" id="speakBtn">朗读当前</div>
            <div class="voice-btn" id="listenBtn">语音输入</div>
            <div class="voice-btn" id="hintBtn">提示读音</div>
        </div>
        
        <div class="voice-status" id="voiceStatus"></div>
        
        <input type="text" class="cyber-input" id="idiomInput" placeholder="输入指令...">
        <button class="cyber-button" id="submitBtn">执行</button>
        
        <div class="cyber-result" id="result"></div>
    </div>

    <script>
        // 赛博成语数据库
        const idioms = {
            "一心一意": { lastChar: "意", meaning: "形容心思意念专一", pinyin: "yī xīn yī yì" },
            "意味深长": { lastChar: "长", meaning: "含意深远，耐人寻味", pinyin: "yì wèi shēn cháng" },
            "长年累月": { lastChar: "月", meaning: "形容经历很长时间", pinyin: "cháng nián lěi yuè" },
            "月明星稀": { lastChar: "稀", meaning: "月亮明亮时星星就显得稀疏", pinyin: "yuè míng xīng xī" },
            "稀奇古怪": { lastChar: "怪", meaning: "罕见而奇怪的事物", pinyin: "xī qí gǔ guài" },
            "怪力乱神": { lastChar: "神", meaning: "怪异、勇力、悖乱、鬼神之事", pinyin: "guài lì luàn shén" },
            "神采奕奕": { lastChar: "奕", meaning: "形容精神饱满，容光焕发", pinyin: "shén cǎi yì yì" },
            "奕奕欲生": { lastChar: "生", meaning: "形容艺术形象非常逼真", pinyin: "yì yì yù shēng" },
            "生龙活虎": { lastChar: "虎", meaning: "形容活泼矫健，富有生气", pinyin: "shēng lóng huó hǔ" },
            "虎头蛇尾": { lastChar: "尾", meaning: "比喻做事有始无终", pinyin: "hǔ tóu shé wěi" }
        };

        // 游戏状态
        let currentIdiom = "一心一意";
        let score = 0;
        let levelNames = ["初级黑客", "中级骇客", "高级极客", "网络幽灵"];
        let recognition;
        
        // 获取DOM元素
        const currentIdiomEl = document.getElementById('currentIdiom');
        const hintEl = document.getElementById('hint');
        const inputEl = document.getElementById('idiomInput');
        const submitBtn = document.getElementById('submitBtn');
        const resultEl = document.getElementById('result');
        const scoreEl = document.getElementById('score');
        const levelEl = document.getElementById('level');
        const speakBtn = document.getElementById('speakBtn');
        const listenBtn = document.getElementById('listenBtn');
        const hintBtn = document.getElementById('hintBtn');
        const voiceStatus = document.getElementById('voiceStatus');
        
        // 初始化语音合成
        const synth = window.speechSynthesis;
        
        // 更新界面显示
        function updateDisplay() {
            currentIdiomEl.textContent = currentIdiom;
            const lastChar = idioms[currentIdiom].lastChar;
            hintEl.innerHTML = `[系统提示] 请接一个以"<span style="color:var(--neon-pink)">${lastChar}</span>"开头的成语`;
            inputEl.value = '';
            inputEl.focus();
            
            // 更新等级显示
            const levelIndex = Math.min(Math.floor(score / 3), levelNames.length - 1);
            levelEl.textContent = levelNames[levelIndex];
        }
        
        // 检查用户输入
        function checkAnswer() {
            const userAnswer = inputEl.value.trim();
            const lastChar = idioms[currentIdiom].lastChar;
            
            if (!userAnswer) {
                showResult("错误：未输入指令", false);
                speak("请说出一个成语");
                return;
            }
            
            if (!(userAnswer in idioms)) {
                showResult(`错误：未找到成语"${userAnswer}"`, false);
                speak(`未识别到成语${userAnswer}`);
                return;
            }
            
            if (userAnswer[0] !== lastChar) {
                showResult(`错误：必须以"${lastChar}"开头`, false);
                speak(`错误，必须以${lastChar}开头`);
                return;
            }
            
            // 回答正确
            score++;
            scoreEl.textContent = score;
            const meaning = idioms[userAnswer].meaning;
            showResult(`√ 验证通过！成语解释：${meaning}`, true);
            speak(`回答正确！${userAnswer}，意思是${meaning}`);
            
            // 更新当前成语
            currentIdiom = userAnswer;
            setTimeout(updateDisplay, 1500);
        }
        
        // 显示结果
        function showResult(message, isSuccess) {
            resultEl.textContent = message;
            resultEl.className = isSuccess ? "cyber-result cyber-success" : "cyber-result cyber-error";
            
            // 添加打字机效果
            resultEl.style.animation = "none";
            void resultEl.offsetWidth; // 触发重绘
            resultEl.style.animation = "typing 0.5s steps(40, end)";
        }
        
        // 语音合成函数
        function speak(text) {
            if (synth.speaking) {
                synth.cancel();
            }
            
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'zh-CN';
            utterance.rate = 0.9;
            utterance.pitch = 1.2;
            
            // 设置赛博风格的语音参数
            const voices = synth.getVoices();
            const chineseVoice = voices.find(voice => 
                voice.lang.includes('zh') || voice.lang.includes('Chi')
            );
            
            if (chineseVoice) {
                utterance.voice = chineseVoice;
            }
            
            synth.speak(utterance);
            
            utterance.onstart = () => {
                voiceStatus.textContent = "语音输出中...";
                voiceStatus.classList.add("voice-active");
            };
            
            utterance.onend = () => {
                voiceStatus.textContent = "";
                voiceStatus.classList.remove("voice-active");
            };
        }
        
        // 初始化语音识别
        function initSpeechRecognition() {
            if (!('webkitSpeechRecognition' in window)) {
                showResult("错误：浏览器不支持语音识别", false);
                return null;
            }
            
            recognition = new webkitSpeechRecognition();
            recognition.continuous = false;
            recognition.interimResults = false;
            recognition.lang = 'zh-CN';
            
            recognition.onstart = () => {
                voiceStatus.textContent = "正在聆听...";
                voiceStatus.classList.add("voice-active");
                listenBtn.classList.add("active");
            };
            
            recognition.onresult = (event) => {
                const transcript = event.results[0][0].transcript.trim();
                inputEl.value = transcript;
                checkAnswer();
            };
            
            recognition.onerror = (event) => {
                showResult(`语音识别错误: ${event.error}`, false);
                voiceStatus.textContent = "";
                voiceStatus.classList.remove("voice-active");
                listenBtn.classList.remove("active");
            };
            
            recognition.onend = () => {
                voiceStatus.textContent = "";
                voiceStatus.classList.remove("voice-active");
                listenBtn.classList.remove("active");
            };
            
            return recognition;
        }
        
        // 事件监听
        submitBtn.addEventListener('click', checkAnswer);
        inputEl.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                checkAnswer();
            }
        });
        
        // 朗读当前成语
        speakBtn.addEventListener('click', () => {
            speak(`当前成语是${currentIdiom}，请接以${idioms[currentIdiom].lastChar}开头的成语`);
        });
        
        // 语音输入
        listenBtn.addEventListener('click', () => {
            if (!recognition) {
                recognition = initSpeechRecognition();
            }
            
            if (recognition) {
                recognition.start();
                speak("请说出一个成语");
            }
        });
        
        // 提示读音
        hintBtn.addEventListener('click', () => {
            const nextChar = idioms[currentIdiom].lastChar;
            const matchingIdioms = Object.keys(idioms).filter(
                idiom => idiom.startsWith(nextChar)
            );
            
            if (matchingIdioms.length > 0) {
                const randomHint = matchingIdioms[Math.floor(Math.random() * matchingIdioms.length)];
                speak(`提示：可以尝试${randomHint}，拼音是${idioms[randomHint].pinyin}`);
            } else {
                speak("没有找到合适的成语提示");
            }
        });
        
        // 初始化游戏
        updateDisplay();
        
        // 页面加载时朗读欢迎语
        window.addEventListener('load', () => {
            setTimeout(() => {
                speak("欢迎来到赛博成语接龙，当前成语是一心一意，请接以意开头的成语");
            }, 500);
        });
    </script>
</body>
</html>